<template>
  <el-container class="home-all">
    <el-header height="10vh" class="main-home-head">
      <home-head></home-head>
    </el-header>

    <el-container>
      <el-aside width="15vw" class="main-home-aside">
          <home-menu></home-menu>
      </el-aside>
      <el-main class="main-home-main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import HomeMenu from "@/components/home/HomeMenu.vue";
import HomeHead from "@/components/home/HomeHead.vue";
import {NOTIFICATION_DURING, NOTIFICATION_POSITION, WEB_SOCKET_URL} from "@/constants/common-constant.ts";
import {getToken} from "@/utils/user-utils.ts";
import {onMounted, onUnmounted} from "vue";
import {ElNotification} from "element-plus";
import {updateNotificationReadReq} from "@/api/admin/notification.ts";

let webSocket: any = null;

const openWs = () => {
  webSocket = new WebSocket(WEB_SOCKET_URL, getToken());

  webSocket.onopen = (event:any) => {
  }

  webSocket.onmessage = (event:any) => {
    const data = JSON.parse(event.data)
    ElNotification({
      title: data.notificationTitle,
      message: data.notificationContent,
      duration: data.duration || NOTIFICATION_DURING,
      position: data.position || NOTIFICATION_POSITION,
      onClick: clickNotification(data.id),
      onClose(vm) {
        const params = {
          id: data.id
        }
        updateNotificationReadReq(params)
      },
    })
  }

  webSocket.onerror = (error:any) => {
  }

  webSocket.onclose = (event:any) => {
  }
}

const closeWs = () => {
  webSocket.close();
}

const clickNotification = (id: number) => {
  const params = {
    id: id
  }
  updateNotificationReadReq(params)
  return () => {}
}

onMounted(() => {
  openWs();

})

onUnmounted(() => {
  closeWs()
})

</script>

<style scoped>
.home-all {
  height: 100vh;
  width: 100vw;
}

.main-home-head {
  border: #313438 1px solid;
  padding: 0 0;
}

.main-home-aside {
  border: #313438 1px solid;
}

.main-home-main {
  width: calc(100vw - 15vw);
  height: calc(100vh - 10vh);
}

</style>


